<template>
    <div>
        <!-- 搜索部分 开始 -->
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">

            <el-form-item label="物流单号">
                <el-input v-model="searchForm.code" placeholder="请输入" size="small"
                    @keydown.enter.native="handleSearch()" @keydown.esc.native="handleClearSearch()"></el-input>
            </el-form-item>

            <el-form-item label="物流类别">
                <el-input v-model="searchForm.type" placeholder="请输入" size="small"
                    @keydown.enter.native="handleSearch()" @keydown.esc.native="handleClearSearch()"></el-input>
            </el-form-item>
       
            <el-form-item label="物流公司">
                <el-select v-model="searchForm.company" placeholder="请选择" size="small">
                    <el-option :key="''" :label="'全部'" :value="''"> </el-option>
                    <el-option v-for="item in LogisticsCompanyEnum" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="显示已出库">
                <el-switch v-model="searchForm.showAll" @change="handleSearch()"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch" size="small">
                    <i class="el-icon-search"></i>
                    查询
                </el-button>
                <el-button type="warning" @click="handleClearSearch" size="small">
                    <i class="el-icon-search"></i>
                    清除条件
                </el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="initAddForm(); dialogAddFormVisible = true" size="small">
                    <i class="el-icon-plus"></i>
                    入库
                </el-button>
                <el-button type="success" @click="handleDeleteByChosen" size="small">
                    <i class="el-icon-delete-solid"></i>
                    批量出库
                </el-button>
            </el-form-item>
        </el-form>
        <!-- 搜索部分结束 -->

        <!-- 表格部分 开始-->
        <el-table :data="tableList" 
        style="width: 100%" 
        height="62vh"
        header-cell-class-name="tableHeaderCell"
        border 
        v-loading="loadingTable" 
        element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="code" label="物流单号" sortable width="150">
            </el-table-column>
            <el-table-column prop="name" label="货物名称" sortable width="120">
            </el-table-column>
            <el-table-column prop="type" label="类别" sortable width="120">
            </el-table-column>
            <el-table-column prop="company" scope="row" label="物流公司" sortable width="120">
                <template slot-scope="scope">
                    {{ scope.row.company }}
                </template>
            </el-table-column>
            <el-table-column prop="startTime" scope="row" label="出发时间" sortable width="180">
                <template slot-scope="scope">
                    {{ scope.row.startTime | dateFilter}}
                </template>
            </el-table-column>
            <el-table-column prop="status" scope="row" label="物流状态" width="120" size="small">
                <template slot-scope="scope">
                    {{ scope.row.status}}
                </template>
            </el-table-column>
            <el-table-column prop="getStatus" scope="row" label="取件状态" width="120" size="small">
                <template slot-scope="scope">
                    {{ scope.row.getStatus }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="handleOpenDetailDialog(scope.row.id)">
                        <i class="el-icon-document"></i>
                        详情
                    </el-button>
                    <el-button size="small" type="warning" @click="handleOpenEditDialog(scope.row)">
                        <i class="el-icon-edit-outline"></i>
                        编辑
                    </el-button>
                    <el-button v-if="scope.row.getStatus != '已签收'" size="small" type="success" @click="removeLogisticsById(scope.row)">
                        <i class="el-icon-delete"></i>
                        出库
                    </el-button>

                    <el-tag v-if="scope.row.getStatus == '已签收'"  type="success" @click="removeLogisticsById(scope.row)">
                        已出库
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格部分 结束-->

        <!-- 分页开始 -->
        <div class="page-container">
            <el-pagination @size-change="handlePageSizeChange" @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNum" :page-sizes="[5, 10, 30, 50]" :page-size="pageInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
            </el-pagination>
        </div>
        <!-- 分页结束 -->

        <!-- 查看详情的对话框-->
        <el-dialog title="物流信息详情" :visible.sync="dialogDetailFormVisible" width="80%">
            <el-descriptions title="基本信息" :column="3" border>
                <el-descriptions-item icon="el-icon-date">
                    <template slot="label">
                        <i class="el-icon-date"></i>
                        物流单号
                    </template>
                    {{ logisticsDetail.code }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-box"></i>
                        货物名称
                    </template>
                    {{ logisticsDetail.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-collection-tag"></i>
                        物流类别
                    </template>
                    {{ logisticsDetail.type }}
                </el-descriptions-item>

                <el-descriptions-item>{{ logisticsDetail.company }}
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        物流公司
                    </template>

                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-coordinate"></i>
                        物流状态
                    </template>

                    {{ logisticsDetail.status }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-thumb"></i>
                        取件状态
                    </template>
                    {{ logisticsDetail.getStatus }}
                </el-descriptions-item>
               
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-time"></i>
                        起发时间
                    </template>


                    {{ logisticsDetail.startTime | dateFilter }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-timer"></i>
                        抵达时间
                    </template>
                    {{ logisticsDetail.arrivedTime | dateFilter }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-timer"></i>
                        取件时间
                    </template>
                    {{ logisticsDetail.getTime | dateFilter}}
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions border>
                <el-descriptions-item :labelStyle="{width:'20%'}">
                    <template slot="label">
                        <i class="el-icon-map-location"></i>
                        货物所在地
                    </template>
                    {{ logisticsDetail.driver.location }}
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="相关信息" :column="3" border style="margin-top:20px;">
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user-solid"></i>
                        寄件人姓名
                    </template>
                    {{ logisticsDetail.fromCustomer.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location"></i>
                        寄件人地址
                    </template>
                    {{ logisticsDetail.fromCustomer.addr }}
                </el-descriptions-item>
                <el-descriptions-item label="">
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        寄件人联系电话
                    </template>
                    {{ logisticsDetail.fromCustomer.phone }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user-solid"></i>
                        收件人姓名
                    </template>
                    {{ logisticsDetail.toCustomer.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location"></i>
                        收件人地址
                    </template>
                    {{ logisticsDetail.toCustomer.addr }}

                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        收件人联系电话
                    </template>
                    {{ logisticsDetail.toCustomer.phone }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user-solid"></i>
                        运货师傅名字
                    </template>
                    {{ logisticsDetail.driver.name }}
                </el-descriptions-item>
                <el-descriptions-item>

                    <template slot="label">
                        <i class="el-icon-truck"></i>
                        车牌号
                    </template>
                    {{ logisticsDetail.driver.truckNum }}

                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        运货师傅联系电话
                    </template>
                    {{ logisticsDetail.driver.phone }}
                </el-descriptions-item>
            </el-descriptions>

            <div slot="footer" class="dialog-footer" style="text-align:center">
                <el-button @click="dialogDetailFormVisible = false" type="primary" size="small" style="width: 300px;">确
                    认</el-button>
            </div>
        </el-dialog>

        <!-- 货物入库的对话框-->
        <el-dialog title="货物入库" :visible.sync="dialogAddFormVisible" width="40%" :before-close="beforeCloseDialog">
            <el-form :model="addForm" :rules="addFormRule" ref="addForm" :inline="true">

                <el-form-item label="货物名称" prop="name" label-width="30">
                    <el-input v-model="addForm.name" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="类别" prop="type" label-width="30">
                    <el-input v-model="addForm.type" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="单号" prop="code" label-width="30">
                    <el-input v-model="addForm.code" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="物流公司" prop="company">
                    <template slot-scope="scope">
                        <el-select v-model="addForm.company" placeholder="请选择" size="small">
                            <el-option v-for="item in LogisticsCompanyEnum" :key="item.id" :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item><br>
                <el-form-item label="发货客户" prop="customerIdFrom">
                    <el-select v-model="addForm.customerIdFrom" placeholder="请选择" size="small" width="100">
                        <el-option v-for="item in customerList" :key="item.id" :label="item.name + ' ' + item.phone" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="收货客户" prop="customerIdTo">
                    <el-select v-model="addForm.customerIdTo" placeholder="请选择" size="small" width="100">
                        <el-option v-for="item in customerList" :key="item.id" :label="item.name + ' ' + item.phone" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="指派运货师傅" prop="driverId" label-width="120">
                    <el-select v-model="addForm.driverId" placeholder="请选择" size="small" width="100">
                        <el-option v-for="driver in driverList" :key="driver.id" :label="driver.name + ' [' + driver.truckNum + ']'"
                            :value="driver.id">
                        </el-option>
                    </el-select>
                </el-form-item><br>
                <el-form-item label="出发时间" prop="startTime" label-width="120">
                    <el-date-picker type="date" v-model="addForm.startTime" autocomplete="off" size="small">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="预计到达时间" prop="arrivedTime" label-width="120">
                    <el-date-picker type="date" v-model="addForm.arrivedTime" autocomplete="off" size="small">
                    </el-date-picker>
                </el-form-item>


                <el-table-column prop="logisticsStatus" scope="row" label="物流状态" width="180" size="small">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.logisticsStatus" placeholder="请选择"
                            @change="updateStatusById(scope.row)">
                            <el-option v-for="item in logisticsStatusList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="getStatus" scope="row" label="取件状态" width="180" size="small">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.getStatus" placeholder="请选择"
                            @change="updateStatusById(scope.row)">
                            <el-option v-for="item in getStatusList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddFormVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="handleAddlogistics(addForm);" size="small">确 定</el-button>
            </div>
        </el-dialog>


        <!-- 编辑物流的对话框-->
        <el-dialog title="编辑物流信息" :visible.sync="dialogEditFormVisible" width="50%" :before-close="beforeCloseDialog">
            <el-form :model="editForm" :rules="editFormRule" ref="editForm" :inline="true">

                <el-form-item label="货物名称" prop="name" label-width="30">
                    <el-input v-model="editForm.name" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="类别" prop="type" label-width="30">
                    <el-input v-model="editForm.type" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="物流公司" prop="company" label-width="30">
                    <template slot-scope="scope">
                        <el-select v-model="editForm.company" placeholder="请选择" size="small">
                            <el-option v-for="item in LogisticsCompanyEnum" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="物流单号" prop="code" label-width="30">
                    <el-input v-model="editForm.code" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="发货客户" prop="customerIdFrom">
                    <el-select v-model="editForm.customerIdFrom" placeholder="请选择" size="small" width="100">
                        <el-option v-for="item in customerList" :key="item.id" :label="item.name + ' ' + item.phone" :value="item.id">
                        </el-option>
                    </el-select>
                   
                </el-form-item>
                <el-form-item label="收货客户" prop="customerIdTo">
                    <el-select v-model="editForm.customerIdTo" placeholder="请选择" size="small" width="100">
                        <el-option v-for="item in customerList" :key="item.id" :label="item.name + ' ' + item.phone" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="指派运货师傅" prop="driverId" label-width="120">
                    <el-select v-model="editForm.driverId" placeholder="暂无" size="small" width="100">
                        <el-option :label="undefined">无</el-option>
                        <el-option v-for="driver in driverList" :key="driver.id" :label="driver.name + ' [' + driver.truckNum + ']'"
                            :value="driver.id">
                        </el-option>
                    </el-select>
                </el-form-item><br>
                <el-form-item label="物流状态" prop="status" label-width="120">
                    <el-select v-model="editForm.status" placeholder="请选择" size="small">
                        <el-option v-for="item in LogisticsStatusEnum" :key="item.id" :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item><br>
                <el-form-item label="出发时间" prop="startTime" label-width="120">
                    <el-date-picker type="date" v-model="editForm.startTime" autocomplete="off" size="small">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="预计到达时间" prop="arrivedTime" label-width="120">
                    <el-date-picker type="date" v-model="editForm.arrivedTime" autocomplete="off" size="small">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="取件状态" prop="arrivedTime" label-width="120">
                    <el-select v-model="editForm.getStatus" placeholder="请选择" size="small">
                        <el-option v-for="item in LogisticsGetStatusEnum" :key="item.name" :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditFormVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="handleUpdatelogistics(editForm)" size="small"
                    :disabled="disabledEditOkBtn" :loading="loadingEditOkBtn">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import * as moment from 'moment';
import logisticsApi from '@/api/logistics.js';
import driverApi from '@/api/driver.js';
import customerApi from '@/api/customer.js';
import { LogisticsCompanyEnum, LogisticsStatusEnum, LogisticsGetStatusEnum } from '@/utils/constant.js';
export default {
    name: 'Transport',
    filters: {
        dateFilter(time) {
            if (time == null || time == '') {
                return '无'
            } else {
                return moment(new Date(time)).format('YYYY-MM-DD HH:mm')
            }
        }
    },
    data() {
        return {
            disabledEditOkBtn: false,
            loadingEditOkBtn: false,
            LogisticsStatusEnum: [],     // 枚举: 物流信息状态
            LogisticsGetStatusEnum: [],  // 枚举: 取件状态
            loadingTable: true,       // 加载表格
            dialogAddFormVisible: false,    // 添加的对话框是否可见
            dialogEditFormVisible: false,
            dialogDetailFormVisible: false,
            breadcrumbRoutes: [],     // 面包屑路由
            searchForm: {             // 查询表单
                code: '',               // 物流单号
                type: '',              // 物流类别
                company: '',          // 物流公司
                showAll: false,       // 是否显示已出库
            },
            editForm: {                 // 编辑物流的表单信息
                id: null,               // 物流ID
                code: '',               // 物流单号
                driverId: '',           // 司机 ID
                customerIdFrom: '',     // 发货客户 ID
                customerIdTo: '',       // 收货客户 ID
                startTime: '',          // 出发时间
                getTime: '',            // 取件时间
                arrivedTime: '',        // 到达时间
                type: '',               // 物流类型
                name: '',               // 名称
                company: '',            // 物流公司
                status: '',             // 物流状态
                getStatus: '',          // 物流取件状态
            },
            addForm: {                // 添加物流的表单信息
                code: '',               // 物流单号
                driverId: '',           // 司机 ID
                customerIdFrom: '',     // 发货客户 ID
                customerIdTo: '',       // 收货客户 ID
                startTime: '',          // 出发时间
                arrivedTime: '',        // 到达时间
                name: '',               // 名称
                company: '',            // 物流公司
                type: '',               // 货物类别
            },
            addFormRule: {
                name: [
                    { required: true, message: '货物名称不能为空', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '货物单号不能为空', trigger: 'blur' },
                ],
                driverId: [
                    { required: true, message: '司机不能为空', trigger: 'blur' },
                ],
                customerIdFrom: [
                    { required: true, message: '发货客户不能为空', trigger: 'blur' },
                ],
                customerIdTo: [
                    { required: true, message: '收货客户不能为空', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '货物类型不能为空', trigger: 'blur' },
                ],
                company: [
                    { required: true, message: '物流公司不能为空', trigger: 'blur' },
                ],
            },
            editFormRule: {
                name: [
                    { required: true, message: '货物名称不能为空', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '货物单号不能为空', trigger: 'blur' },
                ],
                customerIdFrom: [
                    { required: true, message: '发货客户不能为空', trigger: 'blur' },
                ],
                customerIdTo: [
                    { required: true, message: '收货客户不能为空', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '货物类型不能为空', trigger: 'blur' },
                ],
                company: [
                    { required: true, message: '物流公司不能为空', trigger: 'blur' },
                ],
                status: [
                    { required: true, message: '物流状态不能为空', trigger: 'blur' },
                ],
                getStatus: [
                    { required: true, message: '取件状态不能为空', trigger: 'blur' },
                ],
            },
            ////////////////////////////////////////////////////////////////////////////////////////   需要向后台请求获取的数据
            chosenTableList: [],  // 选择的表格数据
            ////////////////////////////////////////////////////////////////////////////////////////  需要向后台请求获取的数据
            tableList: [],             // 表格数据
            pageInfo: {
                pageNum: 1,           // 当前页
                pageSize: 5,          // 每一页的记录数量
                total: 20,            // 总的记录数
            },
            driverList: [],
            customerList: [],
            logisticsDetail: {
                fromCustomer: {},
                toCustomer: {},
                driver: {}
            },
        };
    },
    created() {
        this.$bus.$emit('loadBreadcrumb')
        this.LogisticsCompanyEnum = LogisticsCompanyEnum
        this.LogisticsStatusEnum = LogisticsStatusEnum
        this.LogisticsGetStatusEnum = LogisticsGetStatusEnum
        // 更新分页信息
        this.pageInfo.pageNum = Number(this.$route.params.pageNum) || 1
        this.pageInfo.pageSize = Number(this.$route.params.pageSize) || 5
        this.searchForm.pageNum = this.pageInfo.pageNum
        this.searchForm.pageSize = this.pageInfo.pageSize
        // 获取司机数据
        this.getTableList()
        this.getCustomerList()
        this.getDriverList()
    },
    mounted() {
        // 默认加载 1 秒 2
        setTimeout(() => {
            this.loadingTable = false
        }, 1200)
    },

    methods: {
        // 当要关闭弹框时
        beforeCloseDialog(done) {
            this.$confirm(
                `是否确认取消操作?`,
                '温馨提示',
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(
                    () => { done() }
                )
        },
        // 根据状态 ID 查找对应的记录
        getStatusById(id) {
            let that = {}
            LogisticsStatusEnum.forEach(status => {
                if (status.id === id) {
                    that = status
                    return status
                }
            })
            return that
        },
        // 根据取件状态 ID 查找对应的记录
        getGetStatusById(id) {
            let that = {}
            LogisticsGetStatusEnum.forEach(status => {
                if (status.id === id) {
                    that = status
                    return status
                }
            })
            return that
        },
        // 根据公司的ID到枚举里面查找对应的记录
        getCompanyById(id) {
            let that = {}
            LogisticsCompanyEnum.forEach(company => {
                if (company.id === id) {
                    that = company
                    return company
                }
            })
            return that.name
        },
        getNowTime() {
            return moment(new Date()).format('YYYY-MM-DD HH:mm')
        },
        // 当点击搜索按钮
        handleSearch() {
            this.$router.push(
                {
                    path: this.$route.path,
                    query: {
                        pageNum: this.$route.pageNum,
                        pageSize: this.$route.pageSize
                    }
                }
            )
            this.getTableList(this.routePageNum, this.routePageSize)
        },
        handleClearSearch() {
            this.searchForm.code = ''
            this.searchForm.type = ''
            this.searchForm.company = ''
            this.handleSearch()
        },
        // 当选择表格某一项时
        handleSelectionChange(dataList) {
            this.chosenTableList = dataList
        },
        // 切换页面时
        handleCurrentChange(pageNum) {
            this.$router.push({
                path: this.$route.path,
                query: {
                    pageNum: pageNum,
                    pageSize: this.$route.query.pageSize,
                }
            })
            this.getTableList(pageNum, this.routePageSize)
        },
        // 修改每一页记录显示数量时
        handlePageSizeChange(pageSize) {
            this.$router.push({
                path: this.$route.path,
                query: {
                    pageNum: this.$route.query.pageNum,
                    pageSize: pageSize,
                }
            })
            this.getTableList(1, pageSize)
        },
        // 根据 ID 修改物流公司
        updateCompanyById(logistics) {
            logisticsApi.updateLogisticsById(logistics)
                .then(
                    () => {
                        this.$message.success('物流公司修改成功!')
                        this.getTableList(this.routePageNum, this.routePageSize)
                    }
                )
        },
        // 根据物流的 id 修改取件状态
        updateGetStatusById(logistics) {
            logisticsApi.updateLogisticsById(logistics)
                .then(
                    () => {
                        this.$message.success('取件状态修改成功!')
                        this.getTableList(this.routePageNum, this.routePageSize)
                    }
                )
            setTimeout(() => {
                this.getTableList(this.routePageNum, this.routePageSize)
            }, 500)
        },
        // 根据物流的 id 修改状态
        updateStatusById(logistics) {
            logisticsApi.updateLogisticsById(logistics)
                .then(
                    () => {
                        this.$message.success('物流状态修改成功!')
                        this.getTableList(this.routePageNum, this.routePageSize)
                    }
                )
            setTimeout(() => {
                this.getTableList(this.routePageNum, this.routePageSize)
            }, 500)
        },
        // 处理出库物流
        handleDeleteByChosen() {
            // 如果没有选择物流, 则弹出提示并返回
            if (this.chosenTableList.length == 0) {
                return this.$message.warning('请先选择需要出库的物流')
            }
            // 提取出每个物流的ID
            const logisticsIds = []
            this.chosenTableList.forEach(logistics => logisticsIds.push(logistics.id))

            this.$confirm(
                `是否确认出库id为[${logisticsIds}]的这些物流？`,
                '温馨提示',
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(
                    () => {
                        logisticsApi.deleteLogisticsByIds(logisticsIds)
                            .then(
                                () => {
                                    this.$message.success('出库成功!')
                                    setTimeout(() => {
                                        this.getTableList(1, this.routePageSize)
                                    }, 1000)
                                }
                            )
                    }
                )
        },
        // 添加新物流
        handleAddlogistics(logistics) {
            this.$refs['addForm'].validate(valid => {
                if (valid) {
                    logisticsApi.addLogistics(logistics)
                        .then(
                            () => {
                                this.$message.success('添加成功!')
                                setTimeout(() => {
                                    this.getTableList(this.routePageNum, this.routePageSize)
                                }, 1000)
                                // 关闭窗口
                                this.dialogAddFormVisible = false
                            }
                        )
                } else {
                    return false
                }
            })
        },
        // 打开查看详情的弹窗
        handleOpenDetailDialog(logisticsId) {
            // TODO 根据物流 ID 查询物流详情信息
            logisticsApi.getDeitalById(logisticsId)
                .then(
                    (response) => {
                        this.logisticsDetail = response.data.data
                        console.log(`@已获取到物流ID=${logisticsId}的详情`, this.logisticsDetail)
                        this.dialogDetailFormVisible = true
                    }
                )

        },
        // 打开编辑物流的弹窗
        handleOpenEditDialog(logistics) {
            // 查询物流详情
            this.editForm.id = logistics.id
            this.editForm.code = logistics.code
            this.editForm.driverId = logistics.driverId
            this.editForm.customerIdFrom = logistics.customerIdFrom
            this.editForm.customerIdTo = logistics.customerIdTo
            this.editForm.startTime = logistics.startTime
            this.editForm.arrivedTime = logistics.arrivedTime
            this.editForm.type = logistics.type
            this.editForm.name = logistics.name
            this.editForm.status = logistics.status
            this.editForm.getStatus = logistics.getStatus
            this.editForm.getTime = logistics.getTime
            this.editForm.company = logistics.company
            this.dialogEditFormVisible = true
        },
        // 初始化表单信息
        initAddForm() {
            // 查询物流详情
            this.addForm.code = ''
            this.addForm.driverId = ''
            this.addForm.customerIdFrom = null
            this.addForm.customerIdTo = null
            this.addForm.startTime = ''
            this.addForm.arrivedTime = ''
            this.addForm.type = ''
            this.addForm.name = ''
        },
        // 更新物流信息
        handleUpdatelogistics(logistics) {
            // 禁用 按钮
            this.disabledEditOkBtn = true
            // 加载按钮
            this.$refs['editForm'].validate(valid => {
                if (valid) {
                    logisticsApi.updateLogisticsById(logistics)
                        .then(
                            () => {
                                this.$message.success('更新成功!');
                                setTimeout(() => {
                                    this.dialogEditFormVisible = false
                                    this.getTableList(this.routePageNum, this.routePageSize)
                                }, 300)
                            }
                        )
                } else {
                    return false
                }
            })
            setTimeout(() => {
                this.loadingEditOkBtn = false
                this.disabledEditOkBtn = false
            }, 1200)
        },
        // 根据 ID 出库物流信息
        removeLogisticsById(logistics) {
            this.$confirm(
                `是否确认出库物流单号为 [${logistics.code}] ，名称为 [ ${logistics.name} ] 的货物？`,
                '温馨提示',
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(
                    () => {
                        logisticsApi.deleteLogisticsByIds([logistics.id])
                            .then(
                                () => {
                                    this.$message.success('出库成功!')
                                    setTimeout(() => {
                                        this.getTableList(1, this.routePageSize)
                                    }, 1000)
                                }
                            )
                    }
                )
        },
        //////////////////////////////////////// 请求数据的方法 //////////////////////////////////////////
        getTableList(pageNum = 1, pageSize = 5) {
            this.loadingTable = true
            logisticsApi.getPage({ ...this.searchForm, pageNum, pageSize })
                .then(
                    (response) => {
                        const { pageInfo } = response.data
                        // 记录表格数据
                        this.tableList = pageInfo.logisticsList
                        // 记录分页数据
                        this.pageInfo.pageNum = pageInfo.pageNum
                        this.pageInfo.pageSize = pageInfo.pageSize
                        this.pageInfo.total = pageInfo.total
                        console.log('@已获取到物流的表格数据', this.tableList)
                        setTimeout(() => {
                            this.loadingTable = false
                        }, 500)
                    }
                )
        },
        getCustomerList() {
            customerApi.getList()
                .then(
                    (response) => {
                        this.customerList = response.data.items
                        console.log('@已获取到所有顾客信息', this.customerList)
                    }
                )
        },
        getDriverList() {
            driverApi.getList()
                .then(
                    (response) => {
                        this.driverList = response.data.items
                        console.log('@已获取到所有司机信息', this.driverList)
                    }
                )
        },
        getLogisticsDetail(logisticsId) {
            logisticsApi.getDeitalById(logisticsId)
                .then(
                    (response) => {
                        this.logisticsDetail = response.data.data
                        console.log(`@已获取到 [id=${this.logisticsId}] 的物流详情`, this.logisticsDetail)
                    }
                )
        }

    },
};
</script>

<style lang="scss" scoped>
.page-container {
    margin-top: 20px;
    text-align: center;
}
:deep .tableHeaderCell{
    background: #b6d6e3 !important;
    color: #495069;
}
</style>